<template>
<div class="app">
  <div>
    AppContent
  </div>

  <button v-on:click="changeTitle">修改title</button>

  <button @click="currentPage='home'">home</button>
  <button @click="currentPage='about'">about</button>
  <component :is="currentPage">

  </component>
</div>
</template>

<script>
import Home from './views/Home.vue'
import About from './views/About.vue'
import useTitle from './hooks/useTitle'
import {ref} from 'vue'
export default {
  name: "App",
  components:{
    Home,
    About
  },
  setup(props,context){
    const currentPage=ref('home')
    function changeTitle(){
      useTitle('app title')
    }

    return{
      currentPage,
      changeTitle
    }
  }
}
</script>

<style scoped>

</style>